<template>
 <div>
    <span class="cityName" @click="city_Name">
     {{cityName}}
     <i class="fa fa-map-marker" aria-hidden="true"></i>
     </span>
    <Swiper :slides='banerList'></Swiper>
    <TabBar :liArr="['正在热映', '即将上映']" :ID="id" @input="fn"></TabBar>
    <!-- 三级路由渲染 -->
    <router-view></router-view>
 </div>
</template>

<script>
import Swiper from '../../components/Swiper'
import TabBar from '../../components/TabBar'
import { getBanerList } from '../../api/film'
export default {
  name: 'homeFilms',
  components: {
    [Swiper.name]: Swiper,
    [TabBar.name]: TabBar
  },

  data () {
    return {
      banerList: [],
      id: 0,
      cityName: localStorage.getItem('cityName')
    }
  },

  methods: {
    fn (ID) {
      if (ID === 0) {
        this.id = 1
      } else {
        this.id = 0
      }
    },
    city_Name () {
      this.$router.push({ path: '/city' })
    }
  },

  watch: {
    id: function () {
      let name = this.id === 0 ? 'nowPlaying' : 'comingSoon'
      this.$router.replace({ name })
    }
  },

  created () {
    getBanerList({
      type: 2,
      cityId: 440300,
      k: 8135608
    }).then(res => {
      this.banerList = res.data.data
    })
  }
}
</script>

<style scoped lang="scss">
.cityName{
  position: absolute;
  top: 18px;
  left: 7px;
  color: #fff;
  z-index: 10;
  font-size: 13px;
  background: rgba(0,0,0,.2);
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  text-align: center;
  padding: 0 5px;
}
</style>
